<template>
	<view class="schedule-content">
		<view class="schedule-screen">
			<u-tabs
				:list="screenList"
				lineWidth="35"
				@change="tabChange"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize: '32rpx'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize: '32rpx'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
			>
			</u-tabs>
		</view>
		<view class="schedule-list">
			<empty v-if="isShow"></empty>
			<view class="list" v-for="item in 3" :key="index">
				<view class="item-date">2024年4月17</view>
				<view class="item-info" v-for="item1 in 2" :key="index">
					<view class="item-sel r-flex">
						<u-checkbox-group>
							<u-checkbox @change="checked()" v-model="isChecked" size="16" activeColor="#b4b7bb">
							</u-checkbox>
						</u-checkbox-group>
						<view class="title" :class="isChecked == true?'isActive':''">
							准备资料到合肥市包河区人民法院立案
						</view>
						<view class="recode-del r-flex">
							<u-icon name="attach" size="16" color="#b4b7bb"></u-icon>
							<text style="padding-left: 2px;margin-top: -1px;">案件</text>
						</view>
					</view>
					<view class="c-info">
						<view class="dec" :class="isChecked == true?'isActive':''"></view>
						<view class="nature" :class="isChecked == true?'isActive':''">10:00-11:30</view>
					</view>
				</view>
			</view>
			<view class="divide-line">
				<u-divider text="我是有底线的"></u-divider>
			</view>
			<view class="add-case r-flex" @click="addSchedule()">
				<u-icon name="plus" color="#fff" size="24"></u-icon>
			</view>
			<view class="isLogin">
				<u-modal :content="modelText" :show="modelShow" confirmText="立即登录" confirmColor="#1C5AD2"
					:closeOnClickOverlay="false" @confirm="confirmTo()"></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import Empty from "@/components/empty/empty.vue"
	export default {
		components: {
			Empty
		},
		data() {
			return {
				isChecked: false,
				recodeList: [],
				modelText: "访问此资源需要完全的身份验证～",
				modelShow: false,
				current: 0,
				screenList: [{
					name: '今日'
				}, {
					name: '本周',
				}, {
					name: '本月',
				}, {
					name: '全部',
				}],
			}
		},
		// 监听页面显示，刷新页面数据
		onShow() {
			if (!uni.getStorageSync('OPEN-ID')) {
				// 如果未登录，则跳转到登录页面
				this.modelShow = true;
				uni.hideTabBar();
			} else {
				this.modelShow = false;
				uni.showTabBar();
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
		},
		computed: {
			// 是否显示缺省页
			isShow() {
				return this.recodeList.length != 0;
			}
		},
		methods: {
			tabChange (item) {
				this.current = item.index;
			},
			// 是否选中
			checked() {
				this.isChecked = !this.isChecked;
			},
			addSchedule() {
				uni.navigateTo({
					url: "/pages/schedule/newSchedule"
				})
			},
			confirmTo() {
				uni.redirectTo({
					url: "/pages/login/landPage"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.schedule-screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0rpx 30rpx;
		align-items: flex-end;
		height: 120rpx;
		text-align: center;
		color: #b4b7bb;
		font-size: 36rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(231, 235, 243, 0.7);
		z-index: 20;
	}

	.schedule-list {
		padding: 30rpx 30rpx;
		margin-top: 110rpx;
	}

	.list {
		width: 100%;
		padding: 30rpx 30rpx;
		font-size: 30rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(231, 235, 243, 0.7);
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.item-info {
			padding: 28rpx 0rpx;
			border-bottom: solid 1px #f1f1f1;

			.item-sel {
				align-items: center;

				.title {
					flex: 1;
					padding-right: 30rpx;
					padding-left: 6rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.recode-del {
					align-items: center;
					font-size: 26rpx;
					color: #b4b7bb;
				}

				.isActive {
					color: #b4b7bb;
				}
			}

			.c-info {
				margin-left: 48rpx;

				.dec {
					font-size: 26rpx;
					margin: 12rpx 0;
					color: #b4b7bb;
				}

				.nature {
					color: #1C5AD2;
					font-size: 28rpx;
				}

				.isActive {
					color: #b4b7bb;
				}
			}
		}
	}

	.divide-line {
		padding: 10rpx 0;
	}

	.add-case {
		position: fixed;
		right: 50rpx;
		bottom: 100rpx;
		width: 90rpx;
		height: 90rpx;
		background: #1C5AD2;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.11);
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		z-index: 10;
	}
	
	.schedule-screen /deep/ .u-tabs__wrapper__nav__line {
		height: 8rpx!important;
		background: linear-gradient(to right, #1C5AD2, #528bfa)!important;
	}
</style>